<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="referrer" content="no-referrer" />
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <link rel="stylesheet" th:href="@{/css/login.css}"/>
        <title>牛客网-账号设置</title>
    </head>
    <body>
        <div class="nk-container">
            <!-- 头部 -->
            <div th:replace="~{index::headerMark}"></div>

            <!-- 内容 -->
            <div class="main">
                <div class="container p-5 mt-3 mb-3">
                    <!-- 上传头像 -->
                    <h6 class="text-left text-info border-bottom pb-2">上传头像</h6>
                    <form class="mt-5" action="" method="post" enctype="multipart/form-data"
                          onsubmit="return false;">
                        <div class="form-group row mt-4">
                            <label class="col-sm-2 col-form-label text-right">选择头像:</label>
                            <div class="col-sm-10">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input is-invalid"
                                           id="head-image" name="headImage"
                                           lang="es" required="">
                                    <label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
                                    <div class="invalid-feedback" id="tip"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mt-4">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10 text-center">
                                <button type="button" class="btn btn-info text-white form-control" onclick="upload();">
                                    立即上传
                                </button>
                            </div>
                        </div>
                    </form>
                    <!-- 修改密码 -->
                    <h6 class="text-left text-info border-bottom pb-2 mt-5">修改密码</h6>
                    <form class="mt-5" th:action="@{/user/changePw}" method="post">
                        <div class="form-group row mt-4">
                            <label for="old-password" class="col-sm-2 col-form-label text-right">原密码:</label>
                            <div class="col-sm-10">
                                <input type="password" th:class="|form-control ${errorMsg!=null?'is-invalid':''}|"
                                       id="old-password" name="oldPassword" placeholder="请输入原始密码!"
                                       required>
                                <div class="invalid-feedback" th:text="${errorMsg}">
                                    密码长度不能小于8位!
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mt-4">
                            <label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
                            <div class="col-sm-10">
                                <input type="password" th:class="|form-control ${tipMsg!=null?'is-invalid':''}|"
                                       id="new-password" name="newPassword" placeholder="请输入新的密码!"
                                       required>
                                <div class="invalid-feedback" th:text="${tipMsg}">
                                    密码长度不能小于8位!
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mt-4">
                            <label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="confirm-password" placeholder="再次输入新密码!"
                                       required>
                                <div class="invalid-feedback">
                                    两次输入的密码不一致!
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mt-4">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10 text-center">
                                <button type="submit" class="btn btn-info text-white form-control">立即保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 尾部 -->
            <div th:replace="~{index::footerMark}"></div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                crossorigin="anonymous"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/bs-custom-file-input/1.3.4/bs-custom-file-input.js"></script>
        <script th:src="@{/js/global.js}"></script>
        <script>
            $(function () {
                bsCustomFileInput.init();
            });

            function upload() {
                var file = $("input[name=headImage]")[0].files[0];//获取上传的文件
                if (file === undefined) {
                    $("#tip").text("您还没有选择上传的图片！");
                } else {
                    var formdata = new FormData();
                    formdata.append("file", file);

                    $.ajax({
                        url: CONTEXT_PATH + "/user/upload",
                        type: "POST",
                        data: formdata,
                        processData: false,//阻止jquery对formData数据进行加工处理
                        contentType: false,//阻止jquery修改formData数据的类型
                        async: false,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code != null && data.code == 200) {
                                window.location.assign(CONTEXT_PATH + "/index");
                            }
                            $("#tip").text(data.msg);
                        },
                        error: function (msg) {
                            window.alert("异步请求发生异常~");
                        }
                    });
                }
                return;
            }
        </script>
    </body>
</html>
